<template>
    <div class="module">
        <transition name="fade-transform" mode="out-in" >
            <component :is="activeComponent" :params="params" @changeComponent="changeComponent" ref="com"/>
        </transition>
    </div>
</template>

<script>
import ftpconfig from './ftpconfig'
import ftpdetail from './ftpdetail'
import ftpresource from './ftpresource'

export default {
  name: 'page',
  components: {
    ftpconfig,
    ftpdetail,
    ftpresource
  },
  data() {
    return {
      params: '',
      activeComponent: 'ftpresource'
    }
  },
  methods: {
    changeComponent(path) {
      this.activeComponent = path.active;
      this.params = path;
    },
    layout() {
      this.$refs.com.layout&&this.$refs.com.layout();
    }
  },
  mounted() {
    this.$nextTick(function() {

    })
  },
  destroyed() {
    console.info('destroyed');
  }
}
</script>

<style scoped>

</style>
